<template>
  <div>
    <el-row>
      <el-col :span="24" class="expression" style="font-size:30px;padding:10px"
        ><p>
          一个四口之家每周刷牙浪费水量=<b style="color:yellow;">
            {{ result }} </b
          >（升）
        </p></el-col
      >
    </el-row>
    <el-row style="width:550px;height:30px;font-size:30px;margin: 30px 200px;">
      <el-col :span="24">虚拟键盘</el-col>
    </el-row>
    <el-row style="width:430px;margin-left:50px;border:1px solid #000;">
      <el-button
        type="success"
        v-for="(item, index) in numlist"
        :key="index"
        @click="recordtext(item)"
        class="btn"
        >{{ item }}</el-button
      ></el-row
    >
  </div>
</template>

<script>
export default {
  created() {
    this.result = this.$store.state.answer[5];
  },
  data() {
    return {
      result: "",
      numlist: [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", 0, "删除"],
    };
  },
  methods: {
        updata() {
      console.log(this.$store.state.pagenum, this.$store.state.answer);
      parent.postMessage(this.$store.state, "*");
    },
    recordtext(item) {
      if (item === "删除") {
                this.result = this.result.substr(0, this.result.length - 1);
      } else {
        this.result = this.result + item;
      }
      this.$store.state.answer[5] = this.result;
      this.updata()
    },
  },
};
</script>

<style scoped>
button {
  margin: 10px;
  font-size: 20px;
  font-weight: 100;
}
.btn {
  width: 120px;
  font-size: 36px;
  height: 60px;
}
.exp button {
  width: 550px;
  height: 60px;
}
.exp span {
  overflow: auto;
}
</style>
